<template>
  <div :class="className">
    <div class="form-item__header">
      <slot name="header">
        <span>{{ title }}</span>
        <span v-if="required" class="form-item__required-icon">*</span>
        <span class="form-item__tip">{{ tip }}</span>
        <span v-if="tag" class="form-item__tag">{{ tag }}</span>
      </slot>
    </div>
    <div class="form-item__body" :style="style">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    tip: {
      type: String,
      default: undefined
    },
    tag: {
      type: String,
      default: undefined
    },
    required: {
      type: Boolean,
      default: false
    },
    top: {
      type: [String, Number],
      default: '0'
    },
    bottom: {
      type: [String, Number],
      default: '0'
    }
  },
  computed: {
    className() {
      return {
        'form-item': true,
        'form-item--required': this.required
      }
    },
    style() {
      return {
        paddingTop: this.top + 'rpx',
        paddingBottom: this.bottom + 'rpx'
      }
    }
  }
}
</script>

<style lang="less">
.form-item {
  position: relative;
  padding: 30px 40px 0;
  background-color: #fff;

  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 40px;
    right: 40px;
    height: 2px;
    background-color: #F5F5F5;
  }

  &__header {
    display: flex;
    align-items: center;
    font-size: 30px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 42px;
  }

  &__required-icon {
    display: none;
    color: #FF595E;
    margin-left: 4px;
  }

  &--required {
    .form-item__required-icon {
      display: inline;
    }
  }

  &__tip {
    font-size: 26px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 37px;
  }

  &__tag {
    width: 64px;
    height: 30px;
    background-color: rgba(25, 111, 250, .1);
    border-radius: 4px;
    margin-left: 16px;
    font-size: 20px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #196FFA;
    line-height: 1;
  }
}
</style>
